<template>
    <div>
        <mixinsObj></mixinsObj>
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="3">
                    <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
                </el-col>
            </el-row>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <!-- {{scope.row.children}} -->
                        <el-row v-for="item in scope.row.children" :key="item.id" class="oneRow oneRows" type="flex"
                            align="middle">
                            <el-col :span="6" :push='n'>
                                <el-tag closable @close="close(scope.row.id, item.id)">{{ item.authName }}</el-tag>
                            </el-col>
                            <el-col :span="18">
                                <el-row v-for="it in item.children" :key="it.id" class="oneRow twoRow" type="flex"
                                    align="middle" justify="center">
                                    <el-col :span="5">
                                        <el-tag type="success" closable @close="close(scope.row.id, it.id)">{{ it.authName }}</el-tag>
                                    </el-col>
                                    <el-col :span="13">
                                        <el-tag type="warning" v-for="t in it.children" :key="t.id" class="oneCol"
                                            closable @close="close(scope.row.id, t.id)">
                                            {{ t.authName }}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="#" type="index">
                </el-table-column>
                <el-table-column label="角色名称" prop="roleName">
                </el-table-column>
                <el-table-column label="角色描述" prop="roleDesc">
                </el-table-column>
                <el-table-column label="操作" prop="name" width="300px">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)">
                            编辑
                        </el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)">
                            删除
                        </el-button>
                        <el-button type="warning" icon="el-icon-star-off" size="mini" @click="showTree(scope.row.id)">
                            分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog title="添加角色" :visible.sync="dialogVisible" width="80%">
            <el-form :model="role" :rules="rulesFrom" ref="refFrom">
                <el-form-item label="角色名称" prop="roleName" :label-width="editformLabelWidth">
                    <el-input v-model="role.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc" :label-width="editformLabelWidth">
                    <el-input v-model="role.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRules">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="编辑角色" :visible.sync="editVisible" width="80%">
            <el-form :model="editRole" :rules="rulesFrom" ref="refFrom">
                <el-form-item label="角色名称" prop="roleName" :label-width="editformLabelWidth">
                    <el-input v-model="editRole.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc" :label-width="editformLabelWidth">
                    <el-input v-model="editRole.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="editRules">确 定</el-button>
            </span>
        </el-dialog>


        <el-dialog title="分配权限" :visible.sync="rightVisible" width="60%" @close="delArr">
            <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" :props="defaultProps" :default-expand-all="true" :default-checked-keys="arr">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rightVisible = false">取 消</el-button>
                <el-button type="primary" @click="getTreeRight">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import mixinsObj from '@/views/mixins.vue'
export default {
    components: { mixinsObj },
    data() {
        return {
            tableData: [],
            role: {
                roleName: '',
                roleDesc: ''
            },
            editRole: {
                roleName: '',
                roleDesc: ''
            },
            editVisible: false,
            dialogVisible: false,
            rightVisible: false,
            editformLabelWidth: '120px',
            n: 3,
            rulesFrom: {
                roleName: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                roleDesc: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ]
            },
            data: [],
            defaultProps: {
                children: 'children',
                label: 'authName'
            },
            arr:[],
            rolesId:''
        }
    },
    methods: {
        async getTableData() {
            let { data } = await this.$http.get('roles')
            this.tableData = data.data
        },
        del(key) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let { data } = await this.$http.delete('roles/' + key)
                if (data.meta.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getTableData()
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        addRules() {
            this.$refs.refFrom.validate(async (valid) => {
                if (valid) {
                    let { data } = await this.$http.post('roles', this.role)
                    if (data.meta.status == 201) {
                        this.dialogVisible = false
                        this.$message.success(data.meta.msg)
                        this.getTableData()
                    } else {
                        this.$message.error(data.meta.msg)
                    }
                }
            });
        },
        async edit(id) {
            this.editVisible = true
            let { data } = await this.$http.get('roles/' + id)
            this.editRole = data.data
        },
        editRules() {
            this.$refs.refFrom.validate(async (valid) => {
                if (valid) {
                    let { data } = await this.$http.put('roles/' + this.editRole.roleId, this.editRole)
                    if (data.meta.status == 200) {
                        this.editVisible = false
                        this.$message.success(data.meta.msg)
                        this.getTableData()
                    } else {
                        this.$message.error(data.meta.msg)
                    }
                }
            });
        },
        async close(roleId, rightId) {
            let { data: res } = await this.$http.delete(`roles/${roleId}/rights/${rightId}`)
            let index = this.tableData.findIndex(item => {
                return item.id == roleId
            })
            if (res.meta.status == 200) {
                this.tableData[index].children = res.data
                this.$message.success(res.meta.msg)
            } else {
                this.$message.error(res.meta.msg)
            }
        },
        async showTree(id) {
            this.rolesId=id
            this.arr=[]
            this.rightVisible = true
            let { data: res } = await this.$http.get('rights/tree')
            this.data = res.data

            let index = this.tableData.findIndex(item=>{
                return item.id == id
            })
            let a = this.tableData[index].children
            this.getThereRight(a)
        },
        getThereRight(a){
            a.forEach(item=>{
                if(item.children){
                    this.getThereRight(item.children)
                  
                }else{
                    this.arr.push(item.id)
                }
            })
        },
        delArr(){
            this.$refs.treeRef.setCheckedKeys([])
        },
        async getTreeRight(){
            let allChecked = this.$refs.treeRef.getCheckedKeys()
            let harfChecked = this.$refs.treeRef.getHalfCheckedKeys()
            let a = [...allChecked,...harfChecked].join(',')
            let {data:res} = await this.$http.post(`roles/${this.rolesId}/rights`,{rids:a})
            if(res.meta.status==200){
                this.$message.success(res.meta.msg)
                this.rightVisible=false
                this.getTableData()
            }else{
                this.$message.error(res.meta.msg)
            }
        }
    },
    mounted() {
        this.getTableData()
    }
}
</script>


<style lang="scss">
.oneRow {
    border-bottom: 1px solid #eee;
}

.twoRow:last-child {
    border-bottom: none;
}

.oneCol {
    margin: 5px;
}

.oneRows:first-child {
    border-top: 1px solid #eee;
}
</style>